import React, { useEffect, useState } from 'react';
import { Table, Modal, ConfigProvider } from 'antd';
import zh_CN from 'antd/es/locale/zh_CN'
import type { ColumnsType } from 'antd/es/table';
import { DatabaseOutlined } from '@ant-design/icons';
import type { TableRowSelection } from 'antd/es/table/interface';
import ComSearch from '../../components/ComSearch'
import { findAll } from '../../apis/shopfind';
import ComPagination from '../../components/ComPagination';

type Props = {}

interface DataType {
  key: React.Key;
  shopName: string;
  age: number;
  address: string;
}


const ShopCategory = (props: Props) => {
  const name = '用户名'
  const [data, setData] = useState([])
  const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [serviceinfoList, setServiceinfoList] = useState([])
  const [total, setTotal] = useState(0)
  // const [modaldata,setModaldata] = useState([])

  useEffect(() => {
    getfindData()
  }, [])

  const getfindData = async (val?: any) => {
    const res = await findAll(val)
    console.log(res);
    if (res.status === 200) {
      setData(res.data.rows)
      setTotal(res.data.total)
    }

  }


  const columns: ColumnsType<DataType> = [
    {
      title: '用户名',
      dataIndex: 'shopName',
      sorter: (a, b) => a.shopName.length - b.shopName.length,
    },
    {
      title: '账户',
      dataIndex: 'account',
    },
    {
      title: '地址',
      dataIndex: 'address',
    },
    {
      title: '电话',
      dataIndex: 'telephone',
    },
    {
      title: '身份证号',
      dataIndex: 'idcard',
    },
    {
      title: '操作',
      dataIndex: 'action',
      render: (text, val) => (
        <DatabaseOutlined style={{ color: 'rgb(22,119,255)' }} onClick={() => openBtn(val)} />
      )
    },
  ];

  const modalColumns: ColumnsType<DataType> = [
    {
      title: '服务名称',
      dataIndex: 'name',
    },
    {
      title: '价格',
      dataIndex: 'price',
    },
    {
      title: '描述',
      dataIndex: 'desc',
    },
    {
      title: '类型',
      dataIndex: 'servicetype',
    }
  ];

  const openBtn = (val: any) => {
    console.log(val);
    setIsModalOpen(true)
    setServiceinfoList(val.serviceinfoList)
  }



  const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
    console.log('selectedRowKeys changed: ', newSelectedRowKeys);
    setSelectedRowKeys(newSelectedRowKeys);
  };

  const rowSelection: TableRowSelection<DataType> = {
    selectedRowKeys,
    onChange: onSelectChange,
  };

  //搜索
  const seaBtn = (val: any) => {
    console.log("ser", val);
    getfindData({ shopName: val.name })
  }

  //重置
  const resetBtn = (val: string) => {
    console.log("reset", val);
    getfindData()
  }


  //模态框
  const showModal = () => {
    setIsModalOpen(true);
  };

  const handleOk = () => {
    setIsModalOpen(false);
  };

  const handleCancel = () => {
    setIsModalOpen(false);
  };

  //获取页数和当前页
  const updatePage = (val: any) => {
    console.log('val', val);
    const data = {
      pageNum: val.current,
      pageSize: val.pageSize
    }
    getfindData(data)
  }

  return (
    <div>
      {/* 搜索 */}
      <ComSearch name={name} search={seaBtn} resetting={resetBtn}></ComSearch>
      {/* 表单 */}
      <div>
        <ConfigProvider locale={zh_CN}>
          <Table rowSelection={rowSelection} columns={columns} dataSource={data} rowKey="id" pagination={{ total: total, pageSizeOptions: [10, 20, 50, 100], showQuickJumper: true, showTotal: (total, range) => `显示 ${range[0]}-${range[1]} 条记录, 共 ${total} 条数据` }} onChange={updatePage} />
        </ConfigProvider>
      </div>
      {/* 分页 */}
      {/* <div style={{marginTop:'20px',display:'flex',justifyContent:'right'}}>
        <ComPagination total={total}></ComPagination>
      </div> */}
      {/* 模态框 */}
      <Modal title="用户信息" open={isModalOpen} onOk={handleOk} onCancel={handleCancel} width={'800px'} footer>
        <Table columns={modalColumns} dataSource={serviceinfoList} />;
      </Modal>
    </div>
  )
}

export default ShopCategory